<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
    <input type="button" value="ajax get方式" onclick="ajaxGet()"/><br/>
	<input type="button" value="ajax post方式" onclick="ajaxPost()"/><br/>
	<input type="button" value="ajax" onclick="ajax()"/><br/>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
	function ajaxGet(){
		//$.get(url, [data], [callback], [type])
		$.get(
			"${pageContext.request.contextPath}/ajax",//url, 代表请求的服务器地址
			{"name":"zhangsan"},                      // data：代表请求服务器端的数据,以json格式
			function(data){                           // callback：表示服务器端成功响应后所触发的函数
				console.log("name :" + data.name + ",age :" + data.age);
			},
			"json"                                    //type代表服务器返回的参数的数据类型
		)
	}
	function ajaxPost() {
		// $.get(url, [data], [callback], [type])
		$.post(
			"${pageContext.request.contextPath}/ajax", //url：代表请求的服务器端地址
			{"name":"zhangsan"},					   // data：代表请求服务器端的数据,以json格式
			function(data) {                           // callback：表示服务器端成功响应后所触发的函数
				// {"name":"李四","age":23}
				console.log("name: " + data.name + ", age: " + data.age);
			},
			"json"                                    //type：表示服务器端返回的参数的数据类型  
		);
	}
	function ajax() {
		$.ajax({
			url : "${pageContext.request.contextPath}/ajax", // url：请求服务器端地址
			async : true, // 可以不写，默认就是true，代表异步
			data : {"name" : "王五", "age" : 40}, // 发送到服务器的参数，建议使用json格式
			success : function(data) {           //成功响应执行的函数，对应的类型是function类型
				// {"name":"李四","age":23}
				console.log("name: " + data.name + ", age: " + data.age);
			},
			dataType : "json",
			type : "POST"
		});
	}
	</script>

</body>
</html>